<div class="control" [ngClass]="themeClass">
    <layout-header (childOuter)="themeChenge($event)"></layout-header>
    <div [ngStyle]="{'float':'left','overflow':'hidden','width': '1590px'}">
        <div class="comTabs">
            <nz-affix nzOffsetTop="60">
                <div nz-row class="station" style="border-bottom:2px solid #dedede">
                    车站名称：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" style="width: 150px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="stationSelect" nzShowSearch
                        [(ngModel)]="stationId" (ngModelChange)="stationChange($event)">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;设备类型：
                    <nz-tree-select *ngIf="devTypeIf" [nzDropdownStyle]="treeNodeStyle" style="width: 200px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="devTypeSelect" nzShowSearch
                        [(ngModel)]="devTypeId" (ngModelChange)="devTypeChange($event)">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;设备名称：
                    <span style="width:150px">
                        <nz-select *ngIf="devNameIf" [nzDropdownClassName]="selectClass" nzShowSearch
                            [(ngModel)]="devNameId" (ngModelChange)="devChange($event)" style="width:150px;">
                            <nz-option *ngFor="let data of devNameSelect" nzCustomContent [nzValue]="data.id"
                                [nzLabel]="data.name"> {{data.name}}</nz-option>
                        </nz-select>
                    </span>
                    &nbsp;&nbsp;&nbsp;报警类型：
                    <nz-tree-select *ngIf="alarmTypeIf" [nzDropdownStyle]="treeNodeStyle" style="width: 200px"
                        (ngModelChange)="alarmTypeChange($event)" [nzDropdownMatchSelectWidth]="false"
                        [nzNodes]="alarmTypeSelect" nzShowSearch [(ngModel)]="alarmTypeId">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;处置流程：
                    <nz-select nz-popover nzContent="点击选择处置流程，可输入名称搜索" nzPlacement="right"
                        [nzDropdownClassName]="selectClass" nzShowSearch [(ngModel)]="stepNameValue"
                        (ngModelChange)="stepChange($event)" style="width:200px;">
                        <nz-option *ngFor="let data of stepNameSelect" nzCustomContent [nzValue]="data.value"
                            [nzLabel]="data.name"> {{data.name}}</nz-option>
                    </nz-select>
                    <button class="chartsButton" (click)="loadData()" nz-button nzSize="large"
                        nzType="primary">查询</button>
                </div>
            </nz-affix>
            <nz-tabset [(nzSelectedIndex)]="selectedIndex" [nzTabBarStyle]="tabBarStyle"
                (nzSelectedIndexChange)="onTabIndexChange_yj($event)">
                <nz-tab *ngFor="let data of nav" [nzTitle]="titleTemplate">
                    <ng-template #titleTemplate>
                        <i nz-icon [nzType]="data.icon"></i>{{ data.name }}
                    </ng-template>
                    <!-- 智能分析 -->
                    <div *ngIf="selectedIndex === 0 && data.id == '1'">
                        <div nz-row>
                            <div nz-col nzSpan="12">
                                <div style="margin-top:5px">
                                    <div class="aititle">
                                        <span class="fl">站场回放</span>
                                        <span class="fr cursor" (click)="fullscreen('站场回放','zctIframe')"><i nz-icon
                                                nzType="fullscreen" nzTheme="outline" title="放大查看"></i></span>
                                    </div>
                                    <div class="aicont" style="position: relative;">
                                        <div style="height:430px" [innerHTML]="zctIframe"></div>
                                        <app-maskiframe #maskiframe [iframewidth]="'760'" [iframeheight]="'430'">
                                        </app-maskiframe>
                                    </div>
                                </div>
                            </div>
                            <div nz-col nzSpan="6">
                                <div style="margin:5px 0 0 15px">
                                    <div class="aititle">
                                        <span class="fl">智能诊断</span>
                                        <span class="fr cursor" (click)="fullscreen('智能诊断','intelligent')"><i nz-icon
                                                nzType="fullscreen" nzTheme="outline" title="放大查看"></i></span>
                                    </div>
                                    <div class="aicont">
                                        <app-controlintelligent [queryParams]="queryParams" *ngIf="intelligent"
                                            [height]="430">
                                        </app-controlintelligent>
                                    </div>
                                </div>
                            </div>
                            <div nz-col nzSpan="6">
                                <div style="margin:5px 0 0 15px">
                                    <div class="aititle">
                                        <span class="fl">故障电路</span>
                                        <span class="fr cursor" (click)="fullscreen('故障电路','gzxxframe')"><i nz-icon
                                                nzType="fullscreen" nzTheme="outline" title="放大查看"></i></span>
                                    </div>
                                    <div class="aicont">
                                        <div *ngIf="!noDataframe" [innerHTML]="gzxxframe"></div>
                                        <div *ngIf="noDataframe" class="nodata">暂无故障电路数据</div>
                                    </div>
                                </div>
                            </div>
                            <div nz-col nzSpan="24">
                                <div style="margin:10px 0 0 0">
                                    <div class="aititle">
                                        <span class="fl">电气特性</span>
                                        <span class="fr cursor" (click)="openModal()"><i nz-icon nzType="fullscreen"
                                                nzTheme="outline" title="放大查看"></i></span>
                                    </div>
                                    <div class="aicont" style="height:300px;">
                                        <app-electricalnml #electricalnml *ngIf="electricalnmlStatus"
                                            [styleHeight]="'280'" [theme]="themeClass" [queryParams]="queryParams"
                                            [stationId]="stationId" [devNameText]="devNameText" [scValue]="scValue"
                                            [sjValue]="sjValue" [dataType]="'jc'">
                                        </app-electricalnml>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 图纸信息 -->
                    <div *ngIf="selectedIndex === 1 && data.id == '2'">
                        <div class="tuzhi">
                            <div class="pic" *ngFor="let data of tupian" [title]="data.name"
                                (click)="openPic(data.url)">
                                <div class="picbox">
                                    <div><img [src]="data.url"></div>
                                </div>
                                <div class="pictext">{{data.name}}</div>
                            </div>
                            <div class="pic" *ngFor="let data of tuzhi" [title]="data.name" (click)="openPic(data.svg)">
                                <div class="picbox">
                                    <div><img [src]="data.url"></div>
                                </div>
                                <div class="pictext">{{data.name}}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 备品备件 -->
                    <div *ngIf="selectedIndex === 2 && data.id == '3'">
                        <div class="station fl w100 nostyle">
                            <span class="fl title">备品列表</span>
                            <span class="fr">
                                备品类型:
                                <input nz-input [(ngModel)]="sblxFilterText" (ngModelChange)="bpFilter($event,'sblx')"
                                    placeholder="输入文字进行筛选" style="width:150px;">
                                备品名称：
                                <input nz-input [(ngModel)]="bpmcFilterText" (ngModelChange)="bpFilter($event,'bpmc')"
                                    placeholder="输入文字进行筛选" style="width:150px;">
                                <button class="filter" nz-button nzType="primary" nzsize="small"
                                    (click)="getspareList()">全段搜索
                                </button>
                            </span>
                        </div>
                        <div style="clear:both"></div>
                        <div class="menu bpbj">
                            <span>备品类型</span>
                            <span>备品名称</span>
                            <span>车站</span>
                            <span>存放位置</span>
                            <span>存放数量</span>
                        </div>
                        <ul class="list bpbj">
                            <li *ngFor="let data of bpbjList_filter">
                                <span>{{data.code}}</span>
                                <span>{{data.name}}</span>
                                <span>{{data.station}}</span>
                                <span>{{data.place}}</span>
                                <span>{{data.num}}</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 应急出动 -->
                    <div *ngIf="selectedIndex === 3 && data.id == '4'" class="yjContainer">
                        <div class="yjBlock" style="text-align: center;">
                            <div class="station fl w100 nostyle">
                                <span class="fl title">应急交通图</span>
                            </div>
                            <div style="clear:both"></div>
                            <img [src]="yjQrcodeSrc" style="height: 80%;">
                        </div>
                        <div class="yjBlock">
                            <div class="station fl w100 nostyle">
                                <span class="fl title">段值班人员</span>
                                <span class="fr">
                                    <button class="filter" nz-button nzType="primary" nzsize="small"
                                        (click)="searchPerson1()">查询
                                    </button>
                                </span>
                            </div>
                            <div style="clear:both"></div>
                            <div class="menu wyqd">
                                <span>部门</span><span>职务</span><span>姓名</span><span>联系方式</span><span>手机号码</span><span>备注</span>
                            </div>
                            <ul class="list wyqd">
                                <li *ngFor="let data of yingjiList1">
                                    <span>{{data.ORGNAME}}</span>
                                    <span>{{data.VC_JOB}}</span>
                                    <span>{{data.PERNAME}}</span>
                                    <span>{{data.VC_OFF$PHONE}}</span>
                                    <span>{{data.VC_TELPHONE}}</span>
                                    <span>{{data.VC_NOTE}}</span>
                                </li>
                            </ul>
                        </div>

                        <div class="yjBlock">
                            <div class="station fl w100 nostyle">
                                <span class="fl title">车间/工区值班人员表</span>
                                <span class="fr">
                                    部门：
                                    <nz-tree-select [nzNodes]="bumenSelect2" nzPlaceHolder="请选择"
                                        [(ngModel)]="bumenValue2" [nzDropdownStyle]="{height: '200px'}"
                                        class="filter wd">
                                    </nz-tree-select>
                                    姓名：
                                    <input class="filter wd" nz-input placeholder="输入姓名" [(ngModel)]="xingmingValue2">
                                    <button class="filter" nz-button nzType="primary" nzsize="small"
                                        (click)="searchPerson2()">查询
                                    </button>
                                </span>
                            </div>
                            <div style="clear:both"></div>
                            <div class="menu wyqd">
                                <span>部门</span><span>职务</span><span>姓名</span><span>联系方式</span><span>手机号码</span><span>备注</span>
                            </div>
                            <ul class="list wyqd">
                                <li *ngFor="let data of yingjiList2">
                                    <span>{{data.ORGNAME}}</span><span>{{data.VC_DICT$NAME}}</span><span>{{data.PERNAME}}</span><span>{{data.VC_OFF$PHONE}}</span><span>{{data.VC_TELPHONE}}</span><span>{{data.VC_NOTE}}</span>
                                </li>
                            </ul>
                        </div>

                        <div class="yjBlock">
                            <div class="station fl w100 nostyle">
                                <span class="fl title">应急人员表</span>
                                <span class="fr">
                                    部门：
                                    <nz-tree-select [nzNodes]="bumenSelect3" nzPlaceHolder="请选择"
                                        [(ngModel)]="bumenValue3" [nzDropdownStyle]="{height: '200px'}"
                                        class="filter wd">
                                    </nz-tree-select>
                                    姓名：
                                    <input class="filter wd" nz-input placeholder="输入姓名" [(ngModel)]="xingmingValue3">
                                    <button class="filter" nz-button nzType="primary" nzsize="small"
                                        (click)="searchPerson3()">查询
                                    </button>
                                </span>
                            </div>
                            <div style="clear:both"></div>
                            <div class="menu wyqd">
                                <span>部门</span><span>职务</span><span>姓名</span>
                                <span>联系方式</span><span>手机号码</span><span>备注</span>
                            </div>
                            <ul class="list wyqd">
                                <li *ngFor="let data of yingjiList3">
                                    <span>{{data.vcDevname}}</span>
                                    <span>{{data.vcJob}}</span>
                                    <span>{{data.vcPersonname}}</span>
                                    <span>{{data.vcTlephone}}</span>
                                    <span>{{data.vcHandphone}}</span>
                                    <span>{{data.vcNote}}</span>
                                </li>
                            </ul>
                            <nz-pagination [nzPageIndex]="yingjiPage" [nzTotal]="yingjiTotal" [nzPageSize]="yingjiLimit"
                                nzShowQuickJumper (nzPageIndexChange)="searchPerson3($event)"
                                (nzPageSizeChange)="searchPerson3(yingjiPage,$event)">
                            </nz-pagination>
                        </div>
                    </div>
                    <!-- 设备信息 -->
                    <div *ngIf="selectedIndex === 4 && data.id == '5'">
                        <table width="100%" class="sbllDrawer">
                            <tr *ngFor="let res of formatData">
                                <td class="center" *ngFor="let item of res">{{item}}</td>
                            </tr>
                        </table>
                    </div>
                    <!-- 检修信息 -->
                    <div *ngIf="selectedIndex === 5 && data.id == '6'">
                        <div class="menu jxjl"><span>检修时间</span><span>检修类型</span><span>检修人</span></div>
                        <ul class="list jxjl">
                            <li *ngFor="let res of jxjlData">
                                <span>{{res.time}}</span><span>{{res.type}}</span><span>{{res.human}}</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 问题记录 -->
                    <div *ngIf="selectedIndex === 6 && data.id == '7'">
                        <div class="menu wtjl">
                            <span>发生时间</span><span>发现人</span><span>问题等级</span><span>问题状态</span><span>问题描述</span>
                        </div>
                        <ul class="list wtjl">
                            <li *ngFor="let res of wtjlData">
                                <span>{{res.time}}</span>
                                <span>{{res.human}}</span>
                                <span>
                                    <b
                                        [ngClass]="{'w1':res.level == '1','w2':res.level == '2','w3':res.level == '3'}"></b>
                                    <strong style="font-weight:normal;" *ngIf="res.level == '1'">
                                        I级</strong>
                                    <strong style="font-weight:normal;" *ngIf="res.level == '2'">
                                        II级</strong>
                                    <strong style="font-weight:normal;" *ngIf="res.level == '3'">
                                        III级</strong>
                                </span>
                                <span>{{res.status}}</span>
                                <span nz-tooltip [nzTooltipTitle]="res.desc" nzTooltipPlacement="bottom">
                                    <ellipsis length="45">{{res.desc}}</ellipsis>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 历史故障 -->
                    <div *ngIf="selectedIndex === 7 && data.id == '8'">
                        <div class="menu gzxx">
                            <span>发生时间</span><span>发生地点</span><span>设备名称</span><span>故障信息</span><span>处置建议</span>
                        </div>
                        <ul class="list gzxx">
                            <li *ngFor="let res of gzxxData">
                                <span>{{res.time}}</span>
                                <span>{{res.address}}</span>
                                <span>{{res.name}}</span>
                                <span nz-tooltip [nzTooltipTitle]="res.info" nzTooltipPlacement="bottom">
                                    <ellipsis length="34">{{res.info}}</ellipsis>
                                </span>
                                <span nz-tooltip [nzTooltipTitle]="res.adv" nzTooltipPlacement="bottom">
                                    <ellipsis length="34">{{res.adv}}</ellipsis>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 报警案例 -->
                    <div *ngIf="selectedIndex === 8 && data.id == '9'">
                        <div class="menu bjal">
                            <span>发生时间</span><span>发生地点</span><span>设备名称</span><span>设备类型</span><span>报警类型</span><span>报警信息</span><span>处置建议</span>
                        </div>
                        <ul class="list bjal">
                            <li *ngFor="let res of bjalData">
                                <span>{{res.time}}</span>
                                <span>{{res.address}}</span>
                                <span>{{res.name}}</span>
                                <span>{{res.dev}}</span>
                                <span>{{res.type}}</span>
                                <span nz-tooltip [nzTooltipTitle]="res.text" nzTooltipPlacement="bottom">
                                    <ellipsis length="20">{{res.text}}</ellipsis>
                                </span>
                                <span nz-tooltip [nzTooltipTitle]="res.adv" nzTooltipPlacement="bottom">
                                    <ellipsis length="20">{{res.adv}}</ellipsis>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 登销记模板 -->
                    <div *ngIf="selectedIndex === 9 && data.id == '10'">
                        <div class="dxjmb">
                            <div style="display: flex;justify-content: center;">
                                <button nz-button nzType="primary" (click)="font_smaller()">字体减小</button>
                                <button nz-button nzType="primary" (click)="font_bigger()">字体加大</button>
                            </div>
                            <table class="dxjmbTable" [ngStyle]="{'fontSize': dxjFontSize + 'px'}">
                                <tr>
                                    <td>登记停用及行车限制条件模板</td>
                                    <td [innerHTML]="dxjTemplateData.restrictRun"></td>
                                </tr>
                                <tr *ngIf="dxjTemplateData.highLine=='1'">
                                    <td>申请上道处理登记模板</td>
                                    <td [innerHTML]="dxjTemplateData.applyToRail"></td>
                                </tr>
                                <tr>
                                    <td>设备恢复销记模板</td>
                                    <td [innerHTML]="dxjTemplateData.equipRecover"></td>
                                </tr>
                                <tr *ngIf="dxjTemplateData.highLine=='1'">
                                    <td>处理完毕下道销记模板</td>
                                    <td [innerHTML]="dxjTemplateData.exitRail"></td>
                                </tr>
                                <tr *ngIf="dxjTemplateData.highLine=='1'">
                                    <td>登乘动车登记模板 </td>
                                    <td [innerHTML]="dxjTemplateData.takeTrain"></td>
                                </tr>
                                <tr>
                                    <td>备注</td>
                                    <td [innerHTML]="dxjTemplateData.remark"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!-- 处置建议 -->
                    <div *ngIf="data.id == '11'">
                        <app-controlczjy *ngIf="controlczjyStatus" #controlczjy [nid]="queryParams.NID"
                            [czjyAlarmType]="czjyAlarmType"></app-controlczjy>
                    </div>
                </nz-tab>
            </nz-tabset>
        </div>
    </div>

    <div [ngStyle]="{'float':'left','overflow':'hidden','width': '330px'}">
        <div class="comNav">
            <app-controlprocess *ngIf="processAct" [theme]="themeClass" [queryParams]="processParam"
            [processList]="stepNameSelect" [stationId]="stationId" [stationName]="stationName" [devTypeId]="devTypeId" [devTypeName]="devTypeName" [devNameText]="devNameText" [alarmTypeName]="alarmTypeName" [faultTime]="queryParams.TIME" (clickCallBack)="processClick($event)" #process>
            </app-controlprocess>
        </div>
    </div>
</div>

<nz-modal [nzClassName]="popClass" nzMaskClosable="false" [(nzVisible)]="fullVisible" [nzTitle]="fullTitle"
    [nzBodyStyle]="{'padding':'5px 24px'}" [nzWidth]="1800" (nzOnCancel)="fullOk()" (nzOnOk)="fullOk()">
    <div *ngIf="fullType == 'zctIframe'" [innerHTML]="zctIframeFull" style="height:800px"></div>
    <div *ngIf="fullType == 'intelligent'">
        <app-controlintelligent [queryParams]="queryParams" *ngIf="!intelligent" [height]="800">
        </app-controlintelligent>
    </div>
    <div *ngIf="fullType == 'gzxxframe'" [innerHTML]="gzxxframeFull" style="height:800px"></div>
</nz-modal>